<%@page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<%@ page import="java.util.*,java.io.*,java.text.*,org.apache.commons.lang.StringEscapeUtils" %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<html>
<head>
	<script type="text/javascript">
		var customerRequestFormValidator;
		$(function() {
			setButton('#btn_submit', true, "ui-icon-circle-check");
			setButton('#btn_clear', true, "ui-icon-trash");
			
			$("#form_customer_request").submit(function(event) {
			    event.preventDefault(); 
			});
			
			$('#btn_submit').bind('click',function() {
				createRequest();
			});
			$('#btn_clear').bind('click',function() {
				clearForm();
			});
			/* $('#btn_progress').bind('click',function() {
				showProgress();
			}); */ 
			
			// validate signup form on keyup and submit
			customerRequestFormValidator = $("#form_customer_request").validate({
				rules: {
					userId: "required",
					email: {
						required: true,
						email: true
					},
					content: "required"					
				},
				messages: {
				},
				invalidHandler: function(e, validator) {
					var errors = validator.numberOfInvalids();
					if (errors) {
						var message = errors == 1
							? 'You missed 1 field. It has been highlighted below'
							: 'You missed ' + errors + ' fields.  They have been highlighted below';
						$("div.error span").html(message);
						$("div.error").show();
						
					} else {
						$("div.error").hide();
					}
				},
				// specifying a submitHandler prevents the default submit, good for the demo
				submitHandler: function() {
					$("div.error").hide();
					//event.preventDefault(); 
				},
				// set this class to error-labels to indicate valid fields
				success: function(label) {
					// set &nbsp; as text for IE
					label.html("&nbsp;").addClass("checked");
				}
			});
			$.validator.messages.required = "";
			
		});
		
		function clearForm(){
			$('#form_customer_request')[0].reset();
		}
		
		function createRequest() {
			if($("#form_customer_request").valid() && validateCaptcha()){
				showProgress();
				$.postJSON(
					"<c:url value='/comment/create.html' />",
					$('#form_customer_request').serializeObject(),
					function(data) {
						closeProgress();
						alertMessage("<fmt:message key='vnnet.giao_dich_thanh_cong' />");
						clearForm();
					});
			}
		}
		
	</script>
</head>
<body>
	<img src="<c:url value='/html/image/icon/Contact.png' />" alt="" title=""
		class="detail_section_icon" border="0">

	<h2 class="detail_title"><fmt:message key="view.contact" /></h2>
	<div class="detail_subtitle"><fmt:message key="view.contact.shop_address" /></div>
	<div class="clear"></div>
	<div class="body_content">
		<p>
			<fmt:message key="view.contact.p1" /><br/>
		</p>
		
		<p>
			<div style="padding: 1px; border: 1px solid #DCDCDC;">
				<img alt="" src="<c:url value='/html/image/map.jpg'/>" style="width: 100%;" />
			</div>
		</p>
		
		<p>
			<h2><strong><fmt:message key="vnnet.co_so_trang_tri_noi_that_quang_bong" /></strong></h2>
			<strong><fmt:message key="vnnet.dia_chi" /></strong> : <fmt:message key="vnnet.dia_chi_noi_dung" /><br/>
			<strong><fmt:message key="vnnet.dien_thoai" /></strong> : 08-3-8644099<br/>
			<strong><fmt:message key="vnnet.duong_day_nong" /></strong> : 0938-588-944 (<fmt:message key="vnnet.a_bong" />)<br/>
			<strong><fmt:message key="vnnet.email" /></strong> : noithatquangbong@gmail.com<br/>
			<strong><fmt:message key="vnnet.website" /></strong> : <a href="http://noithatquangbong.com">http://noithatquangbong.com</a><br/>
		</p>
		<div class="clear"></div>
		<button id="asdf" onclick="test()">Clear</button>
		<p>
			<h2><strong><fmt:message key="vnnet.tao_yeu_cau" /></strong></h2>
			<br>
			<div class="error" style="display: none;">
				<img src="<c:url value='/html/image/icon/Sign Warning.png' />"
					alt="Warning!" width="24" height="24"
					style="float: left; margin: -5px 10px 0px 0px;" /> <span></span>.
				<br clear="all" />
			</div>
			
			
			<div class="form">
				<form action="" method="post" id="form_customer_request" onsubmit="" autocomplete="on">
					<fieldset>
						<p>
							<label class="label_standard" for="userId"><fmt:message key="vnnet.ten_day_du" /></label>&nbsp; 
							<input class="main_input" type="text" id="userId" name="userId" placeholder="Full name" />
						</p>
						<p>
							<label class="label_standard" for="email"><fmt:message key="vnnet.email" /></label>&nbsp; 
							<input class="main_input" type="email" id="email" name="email" placeholder="Email" />
						</p>
						<p>
							<label class="label_standard" for="company"><fmt:message key="vnnet.ten_cong_ty" /></label>&nbsp; 
							<input class="main_input" type="text" id="company" name="company" placeholder="Company Name" />
						</p>
						<p>
							<label class="label_standard" for="phoneNo"><fmt:message key="vnnet.dien_thoai" /></label>&nbsp; 
							<input class="main_input" type="text" id="phoneNo" name="phoneNo" placeholder="Phone Number" />
						</p>
						<p>
							<label class="label_standard" for="content"><fmt:message key="vnnet.chi_tiet" /></label>&nbsp;&nbsp;&nbsp; 
							<textarea style="width: 300px;" class="main_textarea" id="content" name="content" placeholder="Content" cols="25" rows="5"></textarea>
						</p>
						<p>
							<div class="captcha_container">
								<div class="captcha_space_before">
									<label class="label_standard"></label>
								</div>
								<script type="text/javascript" src="http://api.recaptcha.net/challenge?k=6LdUV8USAAAAAHoHk41ftxsiL0WIEWghASvLGqOp"></script>
								<noscript>
								    <iframe src="http://api.recaptcha.net/noscript?k=6LdUV8USAAAAAHoHk41ftxsiL0WIEWghASvLGqOp"
								        height="300" width="500" frameborder="0"></iframe><br>
								    <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
								    <input type="hidden" name="recaptcha_response_field" value="manual_challenge">
								</noscript>
								<script type="text/javascript">initCaptcha();</script>
							</div>
						</p>
						<p>
							<label class="label_standard"></label>&nbsp; 
							<button id="btn_submit">Submit</button>
							<button id="btn_clear">Clear</button>
							<!-- <button id="btn_progress">Progress</button> -->
						</p>
					</fieldset>
				</form>
			</div>
		</p>
		
	</div>
</body>
</html>